<template>
  <div class="max-1200" v-if="windowWidth>992">
    <div id="crumbs" class="max-1200">

      <img src="@/assets/icon/weizhi.png" alt="" class="ic"/>

      <a href="/">{{ globalLanguage.languageSuffix == 'Cn' ? '首页' : 'Главная страница' }}</a> &gt;

      <router-link to="/case">{{ globalLanguage.languageSuffix == 'Cn' ? '经典案例' : 'Случаи' }}</router-link>
    </div>

    <div style="display: flex; flex-wrap: wrap">
      <div
          style="
          width: 20%;
          padding: 0 20px;
          margin-top: 30px;
          margin-bottom: 20px;
        "
          v-for="item in jdalList"
          :key="item"
      >
        <el-card @click="navigateToDetails(item.id)">
          <img :src="isHttp(item.imgUrl)" class="image" width="100%" height="150px"/>
          <div style="margin-top: 20px; height: 30px">
            <span> {{ item['title' + globalLanguage.languageSuffix] }}</span>
          </div>
        </el-card>
      </div>
    </div>
    <div style="display: flex; justify-content: center; margin-bottom: 20px">
      <el-pagination
          :page-size="page.pageSize"
          :pager-count="page.pageNo"
          layout="prev, pager, next"
          :total="total * 1"
          @current-change="handlePage"
      />
    </div>
  </div>
  <div class="mbPhone" v-else>
    <!--面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">{{ globalLanguage.languageSuffix == 'Cn'? '首页': 'главная'}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{globalLanguage.languageSuffix == 'Cn'? '经典案列': 'Детали случая'}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容 -->
    <div class="AnLi" @scroll="handleScroll">
      <div class="tupian">
        <el-card v-for="anli in ANLilist.records" class="anli-card" :key="anli.id" @click="navigateToDetails(anli.id)">
          <!--点击图片和标题都可以跳转到详情页-->
          <div class="image-container" >
            <img :src="isHttp(anli.imgUrl)"/>
          </div>
          <template #footer>{{ globalLanguage.languageSuffix == 'Cn' ? anli.titleCn : anli.titleRa }}</template>
        </el-card>
      </div>
      <div v-if="loading" class="loading-spinner">加载中...</div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import {listjdalPage} from "@/api/jdal.js";
import {onBeforeRouteLeave, useRouter} from 'vue-router';
import {isHttp} from "@/utils/index.js";
const windowWidth = ref(window.innerWidth); // 用于判断当前窗口宽度
const router = useRouter();
const page = ref({
  pageNo: 1,
  pageSize: 10,
});
const total = ref(0);
const jdalList = ref([]);
const loading = ref(false);
const ANLilist = ref({records: [], total: 0,});
const loadJdal = async () => {
  const res = await listjdalPage(page.value);
  if (res.code == 200) {
    jdalList.value = res.jdalIPage.records;
    total.value = res.jdalIPage.total;
  }
};
const handlePage = (pno) => {
  page.value.pageNo = pno;
  loadJdal();
};
const handleResize = () => {
  windowWidth.value = window.innerWidth;
  if (windowWidth.value <= 992) {
    jdal(); // 重新加载数据
  }
};
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  // 移除滚动监听
  window.removeEventListener('scroll', handleScroll);
});
onMounted(() => {
  loadJdal();
  jdal();
  // 初始化 windowWidth
  windowWidth.value = window.innerWidth;
  window.addEventListener('resize', handleResize);
  /*滚动分页*/
  window.addEventListener('scroll', handleScroll);

});

const navigateToDetails = (id) => {
  // 使用路由参数导航
  router.push({name: 'caseDetail', query: {id: id}});
};


const jdal = async ()=> {
  if (loading.value) return; // 防止重复请求
  loading.value = true;
  const res = await listjdalPage(page.value);
  console.log("经典案列 :", res.jdalIPage)
  if (res.code === 200) {
    if (!Array.isArray(ANLilist.value.records)) {
      ANLilist.value.records = []; // 如果未定义，则初始化为一个空数组
    }
    // 合并新获取的数据
    ANLilist.value.records = ANLilist.value.records.concat(res.jdalIPage.records||[]);
    total.value = parseInt(res.jdalIPage.total);
    page.value.pageNo++;   // 页码加1
  }
  loading.value = false;
};

const handleScroll= () => {
  if (!ANLilist.value || !ANLilist.value.records) return; // 确保 ANLilist 正确初始化
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  if (scrollTop + windowHeight >= documentHeight - 200) { // 到达底部
    if (ANLilist.value.records.length < total.value) {
      jdal(); // 加载更多内容
    }
  }
};
onBeforeRouteLeave((to, from, next) => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  sessionStorage.setItem('scrollPosition', scrollTop); // 保存到 sessionStorage
  console.log('scrollPosition', scrollTop);
  next();
});
</script>
<style scoped>
.mbPhone{
  margin-top: -65px !important;
}
.el-dropdown-link {
  cursor: pointer;
  margin-left: 20px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
  padding: 5px;
  width: 100%;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
  width: 100%;
}

.breadcrumb {
  position: fixed; /* 固定在视口 */
  top: 87.5px; /* 距离顶部0 */
  left: 0; /* 距离左侧0 */
  right: 0; /* 距离右侧0 */
  background: white; /* 背景色 */
  z-index: 10; /* 确保在其他内容之上 */
  padding: 20px; /* 添加内边距 */
}
.AnLi {
  padding-top: 70px; /* 根据面包屑的高度添加相应的内边距 */
  width: 100%;
  height: 100%;
  overflow: auto; /* 添加滚动条 */
}

.tupian {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* 允许换行 */
  margin-bottom: 10px;
}

.anli-card {
  width: 48%; /* 设置为48%以避免换行时的间距问题 */
  margin-bottom: 10px; /* 控制每个卡片之间的间距 */
}

.image-container {
  display: flex; /* 使外层容器是flexbox */
  align-items: center; /* 垂直居中图片 */
  justify-content: center; /* 水平居中图片 */
  height: 100px; /* 设置固定高度 */
  width: 100%; /* 填满父容器的宽度 */
}

.anli-card img {
  height: 100px !important;
  width: 100%; /* 或设置为具体值，例如 100% */
  object-fit: fill; /* 填充整个img元素，可能剪裁cover */
}

.loading-spinner {
  text-align: center;
  margin: 20px 0;
}
</style>
